﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>员工注册</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <link href="~/Content/miniMobile/css/miniMobile.css" rel="stylesheet" />
    <script src="~/Content/miniMobile/js/zepto.min.js"></script>
    <script src="~/Content/miniMobile/js/miniMobile.js"></script>
    <link href="~/Content/miniMobile/plugins/mobileSelect/mobileSelect.css" rel="stylesheet" />
    <script src="~/Content/miniMobile/plugins/mobileSelect/mobileSelect.js"></script>
    <script src="~/Content/miniMobile/plugins/icheck/icheck.js"></script>
    <link href="~/Content/miniMobile/plugins/noUiSlider.10.0.0/nouislider.css" rel="stylesheet" />
    <script src="~/Content/miniMobile/plugins/noUiSlider.10.0.0/nouislider.js"></script>
    <link href="~/Content/miniMobile/plugins/fonticon/iconfont.css" rel="stylesheet" />
    <script src="~/Content/layer/layer.js"></script>

</head>
<body class="pb12 fadeIn animated">
    <header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-success t-c">
        

            @*<div class="ui-header-l fl w5" style="padding-top:6px">

                <img style="height:16px;width:250px;" src="~/banner/logo2.png" />
            </div>*@
            <div class="ui-header-l fl w5">
            </div>
            <div class="ui-header-c fl f30 w59">
                江苏省扬中市中等专业学院
            </div>
            <div class="ui-header-r fr w5">

            </div>
        </header>
    <style>
        .formheader {
            line-height: 0.7rem;
        }

            .formheader span {
                display: inline-block;
            }

            .formheader input {
                border: none;
            }
    </style>
    <div class="p3 f30 f30 w75" style="padding-top:1.2rem">
        <form>
            <div class="t-c f28 p1 color4">
                <h2 class="f46" style="color:#4284e0">
                    人脸识别系统注册
                </h2>
            </div>
            <div class="pt2 pb2">
                姓名:
                <input type="text" class="w59  form-control" placeholder="请输入姓名" id="NickName" />
            </div>
            <div class="pt2 pb2">
                编号:
                <input type="text" class="w59  form-control" placeholder="请输入编号" id="WorkNum" />
            </div>
            <div class="pt2 pb2">
                部门:
                <div id="selectBox" class="form-control w59 h7" style="display: inline-block; background: url(../../Content/miniMobile/img/select.png) center right no-repeat; background-size:auto 100%;">
                    <span class="color3" id="defaultDepart">请选择</span>
                </div>
            </div>
            <div class="pt2 pb2">
                性别:
                <label class="mr3"><input type="radio" class="check" name="Sex" value="1" checked />男</label>
                <label class="mr3"><input type="radio" class="check" name="Sex" value="0" />女</label>
            </div>
            <div class="pt2 pb2 blue js_uploadBox" style="position:relative;">
                照片:
                <div class="btn-upload">
                    <a href="javascript:void(0);" onclick="fnTest()"><i class="icon-upload"></i><span class="js_uploadText">点击</span>拍照</a>
                    <input class="js_upFile"  type="file" name="cover" accept="image/*" capture="camera">
                </div>

                <div class="js_showBox "><img class="js_logoBox" style="display:none" id="HeadUrl" src="" width="100px"></div>

            </div>
            <div class="t-c mt5">
                <span class="w18 h7 btn radius5 btn-success" onclick="fnSave()">提交申请</span>
            </div>
            <input type="hidden" value="" id="DepartId" />
            <input type="hidden" value="" id="HeadUrlStr" />
        </form>
    </div>
    @*<nav class="demo-bottomNav mt6 w75 h12 pt1 t-c f28 bg-color8 o-h clearfix">
            版权所有:江苏环宇臻视智能科技有限公司
        </nav>*@
    <script src="~/Content/miniMobile/js/jquery.uploadView.js"></script>
    <script type="text/javascript">
        var ios = 2;
        var index;
        $(".js_upFile").uploadView({
            uploadBox: '.js_uploadBox',//设置上传框容器
            showBox: '.js_showBox',//设置显示预览图片的容器
            width: 100, //预览图片的宽度，单位px
            height: 100, //预览图片的高度，单位px
            allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
            maxSize: 10, //允许上传图片的最大尺寸，单位M
            success: function (e) {
                index= layer.msg('照片上传中请等待', {
                    time:1000*100,
                    icon: 16
                    , shade: 0.01
                });

                if (gt_ios4()) {
                    ios = 1;
                }
                $("#iosType").val(ios);
                dealImage(e, 800, printing);
            }
        });
        //压缩方法
        function dealImage(base64, w, callback) {
            var newImage = new Image();
            var quality = 0.6;    //压缩系数0-1之间
            newImage.src = base64;
            newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
            var imgWidth, imgHeight;
            newImage.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                if (Math.max(imgWidth, imgHeight) > w) {
                    if (imgWidth > imgHeight) {
                        canvas.width = w;
                        canvas.height = w * imgHeight / imgWidth;
                    } else {
                        canvas.height = w;
                        canvas.width = w * imgWidth / imgHeight;
                    }
                } else {
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                    quality = 0.6;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句
                // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定
                // while (base64.length / 1024 > 150) {
                // 	quality -= 0.01;
                // 	base64 = canvas.toDataURL("image/jpeg", quality);
                // }
                // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑
                // while (base64.length / 1024 < 50) {
                // 	quality += 0.001;
                // 	base64 = canvas.toDataURL("image/jpeg", quality);
                // }
                callback(base64);//必须通过回调函数返回，否则无法及时拿到该值
            }
        }

        //使用压缩

        function printing(e) {
            $.post("@Url.Action("SaveHeadImg", "UpLoad")", { dicName: 'WXUser', base64: e, type: ios }, function (result) {
                if (result.state == 1) {
                    $("#HeadUrl").css('display', 'block');
                    $("#HeadUrl").attr("src", result.data);
                }
                layer.close(index);
            })
        }



        function gt_ios4() {
            var u = navigator.userAgent, app = navigator.appVersion;

            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            return isIOS;
        }
        var addressArr = [];
        $(function () {
            $.post("@Url.Action("GetDeparts", "WXMobile")", null, function (result) {
                for (var i = 0; i < result.length; i++) {
                    if (i == 0) {
                        $("#defaultDepart").text(result[i].Name);
                        $("#DepartId").val(result[0].Id);
                    }
                    addressArr.push({ id: result[i].Id, value: result[i].Name })
                }
                var mobileSelect1 = new MobileSelect({
                    trigger: '#selectBox',
                    title: '部门选择',
                    wheels: [{
                        data: addressArr
                    }],
                    position: [0], //初始化定位 打开时默认选中的哪个 如果不填默认为0
                    callback: function (indexArr, data) {
                        console.log(data)
                        $("#DepartId").val(data[0].id)
                    }
                });
            })
        })
        function queryParams() {
            return {
                NickName: $("#NickName").val(),
                WorkNum: $("#WorkNum").val(),
                Sex: $("input[name='Sex']:checked").val(),
                HeadUrl: $("#HeadUrl").attr("src"),
                DepartId: $("#DepartId").val(),
                NeedConfirm: "1"
            };
        }

        function fnSave() {

            if ($("#NickName").val().length == 0 || $("#HeadUrl").attr("src").length == 0) {
                layer.msg('姓名或头像不可为空');
                return;
            }
            layer.msg('数据上传中请等待', {
                time: 100 * 1000,
                icon: 16
                 , shade: 0.01
            });
            $.post("@Url.Action("SaveUserInfo", "WXMobile")", queryParams(), function (result) {
                layer.closeAll('loading');
                if (result.state == 1) {
                    layer.msg('操作成功');
                    top.location.href = "/WXMobile/WXSuccess";
                }
                else {
                    layer.msg(result.message);
                }

            })
        }

        function fnTest()
        {
            $(".js_upFile")[0].click();
        }
    </script>
</body>
</html>
